<template>
  <AForm layout="inline" ref="formRef" :model="formState" v-bind="$attrs" @reset="onReset">
    <AFormItem label="用户名" name="userName">
      <AInput v-model:value="formState.userName" placeholder="请输入用户名"></AInput>
    </AFormItem>
    <AFormItem label="手机号" name="phoneNumber">
      <AInput v-model:value="formState.phoneNumber" placeholder="请输入手机号"></AInput>
    </AFormItem>
    <AFormItem>
      <ASpace>
        <AButton html-type="reset">重置</AButton>
        <AButton type="primary" html-type="submit">搜索</AButton>
      </ASpace>
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive, ref, toValue } from 'vue';

defineOptions({
  inheritAttrs: false
});

const emit = defineEmits(['reset']);
const formRef = ref(null);
const formState = reactive({ userName: '', phoneNumber: '' });

const onReset = () => {
  toValue(formRef)?.resetFields();
  emit('reset');
};
</script>

<style lang="scss" scoped></style>
